<template>
    <div>
        <div class="yesterdayCnsume">昨日医疗器材消耗占比</div>
        <div id="yesterdayCnsume"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps, onUpdated } from 'vue'
import { Chart, getTheme } from '@antv/g2';
const props = defineProps({
    data: {
        type: Array,
        default: [
            { name: '一次性穿刺器', value: 70 },
            { name: '一次性使用无菌注射器', value: 340 },
            { name: '医用手套', value: 337 },
            { name: '无菌注射器', value: 800 },
            { name: '灭菌脱脂棉球', value: 258 },
            { name: '真空采血管', value: 317 },
            { name: '无菌注射器', value: 337 },
            { name: '中心静脉导管(单腔)', value: 465 },
        ]
    }
})
onUpdated(() => {
    const chart = new Chart({
        container: 'yesterdayCnsume',
        autoFit: true,
        height: 300,
        width: 400,
    });
    chart.data(props.data);
    chart.coordinate('polar', {
        innerRadius: 0.4,
    });
    chart.legend('name', {
        position: 'right',
        style: 300
    });
    chart.axis(false);
    chart.tooltip({
        showMarkers: false
    });
    chart.interaction('element-highlight');
    chart
        .interval()
        .position('name*value')
        .color('name')
        .style({
            lineWidth: 0.8,
            stroke: '#fff',
        });
    chart.theme({ "styleSheet": { "brandColor": "#FF6B3B", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] } });
    chart.render();
})

</script>

<style scoped>
.yesterdayCnsume {
    margin-bottom: 50px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
</style>